﻿@page "/admin/tags"
@using Moonglade.Core.TagFeature
@inject IMediator Mediator
@{
    ViewBag.Title = "Manage Tags";
    var tags = await Mediator.Send(new GetTagsQuery());
}

@Html.AntiForgeryToken()

@section scripts{
    <script>
        var editCanvas = new bootstrap.Offcanvas(document.getElementById('editTagCanvas'));

        function initCreateTag() {
            document.querySelector('#edit-form').reset();
            editCanvas.show();
        }

        $(".btn-delete").click(function () {
            var tagid = $(this).data("tagid");
            var cfm = confirm(`Confirm to delete tag: ${$(this).text().trim()}`);
            if (cfm) {
                callApi(`/api/tags/${tagid}`, 'DELETE', {},
                    (resp) => {
                        $(`#li-tag-${tagid}`).hide();
                        blogToast.success('Tag deleted');
                    });
            }
        });

        $(".span-tagcontent-editable").blur(function () {
            var tagId = $(this).data("tagid");
            var newTagName = $(this).text().trim();

            callApi(`/api/tags/${tagId}`, 'PUT', newTagName, (resp) => {
                blogToast.success('Tag updated');
            });
        });

        $("#tagFilter").on("keyup", function () {
            var value = $(this).val().toLowerCase();
            $(".ul-tag-mgr li").filter(function () {
                $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1);
            });
        });

        function handleSubmit(event) {
            event.preventDefault();

            const data = new FormData(event.target);
            const value = Object.fromEntries(data.entries());

            callApi(`/api/tags`, 'POST', value.tagName,
                (resp) => {
                    document.querySelector('#edit-form').reset();
                    $("#editTagModal").modal('hide');
                    window.location.reload();
                });
        }

        const form = document.querySelector('#edit-form');
        form.addEventListener('submit', handleSubmit);
    </script>
}

<div class="admin-toolbar ps-4 pe-4 pt-2 pb-2 border-bottom mb-3 shadow-sm">
    <a class="btn btn-outline-accent" href="javascript:initCreateTag();">
        <i class="bi-plus-lg"></i>
        @SharedLocalizer["New"]
    </a>

    <a asp-action="ExportDownload" asp-controller="DataPorting" asp-route-type="Tags" class="btn btn-outline-accent" target="_blank">
        <i class="bi-upload"></i>
        @SharedLocalizer["Export"]
    </a>
</div>

<div class="ps-4 pe-4">
    <input id="tagFilter" type="text" class="form-control mb-3" maxlength="32" placeholder="Filter..">

    <ul class="list-unstyled ul-tag-mgr">
        @foreach (var tag in tags.OrderBy(model => model.DisplayName))
        {
            <li id="li-tag-@tag.Id" class="border rounded">
                <span class="span-tagcontent-editable" contenteditable="true" spellcheck="false" data-tagid="@tag.Id">@tag.DisplayName</span>
                <a class="btn-delete" data-tagid="@tag.Id">
                    <i class="bi-trash"></i>
                    <span class="d-none">@tag.DisplayName</span>
                </a>
            </li>
        }
    </ul>
</div>

<div class="offcanvas offcanvas-end" tabindex="-1" id="editTagCanvas" aria-labelledby="editTagCanvasLabel">
    <div class="offcanvas-header">
        <h5 class="offcanvas-title" id="editTagCanvasLabel">@SharedLocalizer["Create Tag"]</h5>
        <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
    </div>
    <div class="offcanvas-body">
        <form id="edit-form" method="post">
            <div class="mb-2">
                <label class="form-label">@SharedLocalizer["Name"]</label>
                <input type="text" name="tagName" id="input-tag-name" class="form-control" required />
            </div>
            <div class="mt-3">
                <button type="submit" class="btn btn-success">@SharedLocalizer["Submit"]</button>
                <button type="button" class="btn btn-secondary" data-bs-dismiss="offcanvas">@SharedLocalizer["Cancel"]</button>
            </div>
        </form>
    </div>
</div>
